<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.0.0.min.js"></script>
		<style type="text/css">
		
		
		
			#div001 {
				border: 10px solid #FF0000;
				border-radius: 15%;
				position: fixed;
				top: 300px;
				width: 600px;
				height: 400px;
				z-index: 10;
				background-color: #00FFFF;
				box-shadow: 10px 10px 5px #888888;
				left: 350px;
				transition: all 1s;
			}
			
			#div002 {
				border: 10px solid #FF0000;
				border-radius: 15%;
				position: fixed;
				top: 200px;
				width: 800px;
				height: 600px;
				left: 350px;
				z-index: 20;
				background-color: #1B6D85;
				box-shadow: 10px 10px 5px #888888;
				transition: all 1s;
			}
			
			#div003 {
				border: 10px solid #FF0000;
				border-radius: 15%;
				position: fixed;
				top: 300px;
				width: 600px;
				height: 400px;
				z-index: 15;
				background-color: #B2DBA1;
				box-shadow: 10px 10px 5px #888888;
				left: 550px;
				transition: all 1s;
			}
		</style>
	</head>

	<body>
		<div id="div001"></div>
		<div id="div002"></div>
		<div id="div003"></div>
	</body>

</html>
<script>
	//卡片切换
	var left, center, right;
	window.onload = function() {
		left = document.getElementById("div001");
		center = document.getElementById("div002");
		right = document.getElementById("div003");
		right.addEventListener("click", rightaa);

		center.addEventListener("mouseout", kp_chuxian);
		center.addEventListener("mouseover", kp_xiaoshi);
	}

	function rightaa() {
		//删除旧的事件绑定
		center.removeEventListener("mouseout", kp_chuxian);
		center.removeEventListener("mouseover", kp_xiaoshi);
		right.removeEventListener("click", rightaa);
		//右到中
		$(right).animate({
			top: '200px',
			zIndex: '20',
			width: '800px',
			height: '600px',
			left: '350px'
		});
		//左到右
		$(left).animate({
			left: '800px',
			zIndex: '15'
		});
		//中到左
		$(center).animate({
			zIndex: '10',
			left: '100px',
			width: '600px',
			height: '400px',
			top: '300px'
		});
		var arr = [left, center, right];
		arr.push(arr[0]); //在arr数组最后添加一个新的元素
		arr.shift(); //删除arr数组的第一个元素
		left = arr[0]; //left重新等于新数组的第一个元素
		center = arr[1]; //center重新等于新数组的第二个元素
		right = arr[2]; //right重新等于新数组的第三个元素
		right.addEventListener("click", rightaa);

		center.addEventListener("mouseout", kp_chuxian);
		center.addEventListener("mouseover", kp_xiaoshi);
	}
	//鼠标移出，卡片出现
	function kp_chuxian() {
		left.style.left = "250px";
		right.style.left = "650px";
		center.style.width = "800px";
		center.style.height = "600px";
		center.style.top = "200px";
		center.style.left = "350px"
	}
	//鼠标移入，卡片消失
	function kp_xiaoshi() {
		left.style.left = "350px";
		right.style.left = "550px";
		center.style.width = "1000px";
		center.style.height = "800px";
		center.style.top = "100px";
		center.style.left = "250px"
	}
</script>